/**
 * Created by alan on 2017/4/27.
 * 降雨信息
 */
Ext.define("Admin.view.baseInfo.ddsDrPptn", {
    extend: "Ext.container.Container",
    xtype: "ddsDrPptn",
    requires: [
        "Admin.store.baseInfo.DdsDrPptn",
    ],
    //起别名
    alias: "ddsDrPptn",
    controller: "ddsDrPptnController",
    userCLs: "big-100 small-100",
    layout: "fit",
    height: 200,
    items: {
        xtype: "panel",
        layout: "anchor",
        cls: "dashboard-main-chart shadow",
        width: "100%",
        height: 200,
        margin: 7,
        bodyPadding: 7,
        layout: {
            type: "vbox",
            align: "stretch" //拉伸使其充满整个父容器
        },
        items: [{
                tbar: [{
                        xtype: "combobox",
                        fieldLabel: "测站名称",
                        reference: "stcd",
                        displayField: "stNm",
                        queryMode: "local",
                        valueField: "stcd",
                        triggerAction: "all",
                        labelWidth: 60,
                        anyMatch: true,
                        listeners: {
                            added: function(combo) {
                                var _that = this;
                                var store = Ext.create("Ext.data.Store", {
                                    fields: ["stNm", "stcd", "itemP", "river"],
                                    data: statList
                                });
                                store.clearFilter();
                                store.filter({
                                    property: "itemP",
                                    value: "1"
                                });
                                store.filter({
                                    property: "river",
                                    value: config.RIVER
                                });
                                combo.setStore(store);
                                combo.setValue(store.getData().items[0].data.stcd);
                            }
                        }
                    },
                    {
                        xtype: "datefield",
                        margin: "0 10 0 10",
                        fieldLabel: "时间",
                        format: "Y-m-d",
                        // editable: false,
                        maxValue: new Date(),
                        value: config.defaultStartDate,
                        labelWidth: 40,
                        reference: "startTm",
                        listeners: {
                            change: function() {
                                var edDt = this.nextSibling().nextSibling();
                                edDt.setMinValue(this.value);
                            }
                        }
                    },
                    "--",
                    {
                        xtype: "datefield",
                        maxWidth: 220,
                        value: config.defaultEndDate,
                        format: "Y-m-d",
                        // editable: false,
                        maxValue: new Date(),
                        reference: "endTm"
                    },
                    {
                        xtype: "button",
                        text: "查询",
                        iconCls: "x-fa  fa-file-o",
                        handler: "check",
                        margin: "0 10 0 10",
                        style: "border-radius:4px;-webkit-border-radius: 4px;"
                    }
                ],
                height: 60
            },
            {
                xtype: "panel",
                title: "降雨信息",
                height: "100%",
                border: true,
                flex: 1,
                layout: {
                    type: "hbox",
                    align: "stretch"
                },
                items: [{
                        width: "80%",
                        xtype: "component",
                        id: 'inforChart1',
                        reference: "chart",
                        flex: 1,
                        highchart: null,
                        height: "100%",
                        border: 1,
                        style: {
                            borderColor: "#ccc",
                            borderStyle: "solid"
                        },
                        html: '<div id="ddsDrPptnChart" style="height: 100%;" ></div>',
                        listeners: {
                            afterRender: function(dom) {
                                var me = this;
                                var domId = document.getElementById("ddsDrPptnChart");
                                //设置highchart柱状图最大宽度
                                (function(H) {
                                    var each = H.each;
                                    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
                                        var series = this;
                                        if (series.data.length > 0) {
                                            var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
                                            each(this.data, function(point) {
                                                point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
                                                point.shapeArgs.width = width;
                                            });
                                        }
                                        proceed.call(this);
                                    })
                                })(Highcharts);
                                me.highchart = new Highcharts.Chart({
                                    chart: {
                                        type: 'column',
                                        renderTo: domId
                                    },
                                    title: {
                                        text: ""
                                    },
                                    xAxis: {
                                        categories: []
                                    },
                                    legend: {
                                        align: "center",
                                        verticalAlign: "top"
                                    },
                                    yAxis: {
                                        title: {
                                            text: "日降水量(mm)"
                                        }
                                    },
                                    tooltip: {
                                        valueSuffix: ""
                                    },
                                    plotOptions: {
                                        column: {
                                            maxPointWidth: 30,
                                        }
                                    },
                                    series: [{
                                        name: "日降雨量",
                                        connectNulls: true,
                                        data: []
                                    }]
                                });
                            },
                            resize: function(me, width, height) {
                                this.highchart.setSize(width, height);
                            }
                        }
                    },
                    {
                        xtype: "gridpanel",
                        reference: "ddsDrPptnGrid",
                        width: 320,
                        border: true,
                        columns: [{
                                header: "时间",
                                dataIndex: "tm",
                                flex: 1,
                                align: "center",
                            },
                            {
                                header: "日降水量(mm)",
                                dataIndex: "annP",
                                align: "center",
                                flex: 1
                            }
                        ],
                        store: {
                            type: "ddsDrPptn",
                            listeners: {
                                datachanged: function(data, eOpts) {
                                    var highchart = Ext.ComponentQuery.query('#inforChart1')[0].highchart;
                                    var categoriesData = [],
                                        seriesData1 = [];
                                    var storeData = data.getData().items;
                                    for (var i = 0; i < storeData.length; i++) {
                                        categoriesData.push(Ext.util.Format.date(storeData[i].data.tm, "Y-m-d"));
                                        seriesData1.push(Number(storeData[i].data.annP));
                                    }
                                    highchart.update({
                                        xAxis: {
                                            categories: categoriesData,
                                        },
                                        series: [{
                                            data: seriesData1
                                        }]
                                    });
                                }
                            }
                        },
                        bbar: {
                            xtype: "pagingtoolbar",
                            autoLoad: true,
                            // displayInfo: true,
                            // displayMsg: "显示从第{0}条数据到第{1}条数据，共{2}条数据",
                            // emptyMsg: "没有记录"
                        },
                        stripeRows: true, //斑马线
                        columnLines: true //行线
                    }
                ]
            }
        ]
    }
});